<template>
  <div id="drawlist">
    <div>
      <el-row>
        <el-button class="appear" size="small" @click="toJump">
          返回列表</el-button
        >
      </el-row>
    </div>
    <!-- {{form}} -->
    <div id="drawData"></div>
  </div>
</template>

<script>
import axios from "../utils/request";
let echarts = require("echarts");
export default {
  data() {
    return {
      form: {},
      //  confirmed:0,
      //  confirmedTotal:0,
      //  confirmed:0,
      // data:{
      confirmedTotal: 0,
      suspectedTotal: 0,
      deadTotal: 0,
      cureTotal: 0,
      severeTotal: 0,
      outsideTotal: 0,
      // },
      pageParam: {
        page: 1,
        pageSize: 10000,
      },
    };
  },
  computed: {},
  methods: {
    toJump() {
      this.$router.push("/list");
    },
    getOption() {
      return {
        title: {
          text: "全国疫情数据",
          left: "center",
          top: 20,
          // color:'#b3c0d1',
          textStyle: {
            color: "#4e545b",
          },

          // target:'blank'
        },
        tooltip: {
          show: true,
          // label:{
          //   formatter:'{value}'
          // }
          // trigger:'axis'
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "1%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          data: ["新增确诊", "疑似", "死亡", "治愈", "重症", "境外输入"],
          // nameTextStyle:{
          //   fontStyle:'oblique',
          // }

          // label:{
          //   fontStyle:'oblique'

          // }
        },
        yAxis: { type: "value" },
        series: [
          {
            data: [
              this.confirmedTotal,
              this.suspectedTotal,
              this.deadTotal,
              this.cureTotal,
              this.severeTotal,
              this.outsideTotal,
            ],
            //  data: this.data,
            type: "bar",
            color: "#9ac2c7",
            colorAlpha: 0.1,
            label: {
              show: true,
              position: "top",
              distance: 5,
              fontStyle: "oblique",
              fontWeight: "bold",
            },
            //             showBackground: true,
            //             backgroundStyle: {
            //                 color: '#9ac2c7'

            // }
          },
        ],
      };
    },
    toDraw() {
      let chart = echarts.init(document.getElementById("drawData"));
      let option = this.getOption();
      chart.setOption(option);
    },
    async pageQuery() {
      let total = 0;
      let res = await axios.get("/epidemic/pageQuery", {
        params: this.pageParam,
      });
      // this.data.confirmedTotal += res.data.list.confirmed;
      this.form = res.data.list;
      this.pageSize = res.data.total;
      res.data.list.map((item) => {
        this.confirmedTotal += item.confirmed;
        this.suspectedTotal += item.suspected;
        this.deadTotal += item.dead;
        this.cureTotal += item.cure;
        this.severeTotal += item.severe;
        this.outsideTotal += item.outside;
      });
    },
  },
  created() {
    this.pageQuery();
    //  this.sum(confirmed);
    this.$route.query;
  },
  mounted() {
    setTimeout(() => {
      this.toDraw();
    }, 500);
  },
};
</script>
<style scoped>
#drawData {
  height: 600px;
  background-color: azure;
}
.appear {
  background-color: #2cb5ac;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
  color: white;
}
</style>